<template>
  <div class="mt20 ml19">
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="upload.url"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :limit="1"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
    >
      <el-input
        v-model="upload.fileName"
        placeholder="请选择文件"
        style="width: 400px"
      />
      <div class="img_box">
        <img src="@/assets/images/tripartite/icon_files_upload.png" alt="" />
      </div>
    </el-upload>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="upload.url"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :limit="1"
      :on-progress="handleFileUpload"
      :on-success="handleFile"
    >
      <el-input
        v-model="upload.fileName2"
        placeholder="请选择文件"
        style="width: 400px"
      />
      <div class="img_box">
        <img src="@/assets/images/tripartite/icon_files_upload.png" alt="" />
      </div>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      // 上传文件参数
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
        fileName2: "请选择文件",
      },
    };
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload.clearFiles();
      this.upload.fileName = response.data.fileUrl;
    },
    // 文件上传中处理
    handleFileUpload(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFile(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload.clearFiles();
      this.upload.fileName2 = response.data.fileUrl;
    },
  },
};
</script>
<style lang="scss">
// 文件上传
.upload-demo {
  .el-upload-list {
    display: none;
  }
  .el-upload {
    display: flex;
  }
  .img_box {
    height: 36px;
    width: 36px;
    line-height: 36px;
    background: #0d72ff;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    position: relative;
    right: 37px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
</style>
